<template>
	<view>
		<view class="xflex-x-center xmt50">
			<image class="gb" src="/pagesA/static/images/guanb.png" mode=""></image>
			<view class="title">
				{{info.data.type == 1 ?'商家':'客户'}}已取消订单
			</view>
		</view>
		
		<view class="order">
			<view class="order-item">
				<view class="order-sn">
					订单：{{info.data.sn}}
				</view>
			</view>
			
			<view class="order-item xflex-x-between">
				<view class="xflex-x">
					<image class="order-item-icon" src="/pagesA/static/images/chuang.png" mode=""></image>
					<view class="xflex-x">
						<view class="order-item-span">
							{{info.data?.item?.house_name}}
						</view>
						
						<view class="order-item-span">
							1间
						</view>
					</view>
				</view>
				<view class="order-item-sun">
					<!-- 库存共 <text>2</text>间 -->
				</view>
			</view>
			
			<view class="order-item xflex-x-between">
				<view class="xflex-x">
					<image class="order-item-icon1" src="/pagesA/static/images/rili.png" mode=""></image>
					<view class="xflex-x">
						<view class="order-item-span1">
							{{info.data?.order?.order_info?.time}}
						</view>
						
						<view class="order-item-span">
							{{info.data?.order?.order_info?.night}}间
						</view>
					</view>
				</view>
				
			</view>
			
			
			<view class="order-item xflex-x-between">
				<view class="xflex-x">
					<image class="order-item-icon2" src="/pagesA/static/images/qian.png" mode=""></image>
					<view class="xflex-x">
						<view class="order-item-pricetxt">
							客人出价
						</view>
						<view class="xflex-x">
							<view class="order-item-fang">
								{{info.data?.item?.house_name}}
							</view>
							<view class="order-item-fang">
								￥{{info.data?.order?.price}}/间
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
			
			<view class="total">
				<view class="xflex-x-between">
					<view class="xflex-x total-sun">
						合计: <view class="total-num xml12"><text class="xfz26">￥</text>
						{{info.data?.order?.order_amount}}
						</view>
					</view>
					<view class="total-gd xflex-x">
						<!-- <view class="">
							更多条件
						</view>
						<image class="total-gdimg" src="/pagesA/static/images/jt.png" mode=""></image> -->
					</view>
				</view>
				
			</view>
			
			<view class="hotel xbgf xmt20">
				<view class="xflex-x">
					<view class="hotel-h">
			
					</view>
					<view class="hotel-title">
						参与盲盒房间
					</view>
				</view>
			
				<view class="xflex-x xmt24" >
					<image class="hotel-img" :src="info.data?.item?.image" mode=""></image>
					<view class="hotel-box xflex-y-between xflex1 xai">
						<view class="">
							<view class="hotel-title">
								{{info.data?.item?.house_name}}
							</view>
							<view class="xflex-x xmt12">
								<view class="hotel-span" v-for="ite in info.data?.item?.labels">
									{{ite}}
								</view>
							</view>
						</view>
						<view class="hotel-price">
							<text>￥</text>{{info.data?.item?.price}}
						</view>
					</view>
				</view>
			
			
			</view>
			
			
			<view class="order xbgf xmt20">
				<view class="xflex-x order-tex">
					<view class="order-sn">
						订单编号：
					</view>
					<view class="xflex-x">
						<view class="order-info">
							{{info.data?.sn}}
						</view>
						<view class="order-copy" @click="copy(info.data.sn)">
							复制
						</view>
					</view>
				</view>
				<view class="xflex-x order-tex">
					<view class="order-sn">
						派单时间：
					</view>
					<view class="xflex-x">
						<view class="order-info">
							{{info.data?.order?.blind_open_time}}
						</view>
			
					</view>
				</view>
				
				<view class="xflex-x order-tex">
					<view class="order-sn">
						取消时间：
					</view>
					<view class="xflex-x">
						<view class="order-info">
							{{info.data?.handletime}}
						</view>
			
					</view>
				</view>
			
			</view>
			
			
			
		</view>
	</view>
</template>

<script setup>
	import {orderaftersale,verify,ordercancel} from '../../../network/home.js'
		import {
			onReachBottom,
			onShow,
			onLoad
		} from '@dcloudio/uni-app';
	import { reactive } from 'vue';
		
		
		
		let info = reactive({
			id:'',
			data:'',
			show:false,
			code:''
		})
		
		onLoad((option)=>{
			info.id = option.id
			getorderdetail()
		})
		
		const getorderdetail = () =>{
			orderaftersale({id:info.id}).then(res=>{
				info.data = res.data
			})
		}
		const copy = (data) =>{
			uni.setClipboardData({
				data:data,
				success() {
					uni.showToast({
						icon:"none",
						title:'复制成功'
					})
				}
			})
		}
		const hx = () =>{
			verify({
				id:info.id,
				code:info.code
			}).then(res=>{
				uni.showToast({
					icon:"none",
					title:"核销成功"
				})
				
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			})
		}
		
		const qx = () =>{
			ordercancel({id:info.id}).then(res=>{
				uni.showToast({
					icon:"none",
					title:"取消成功"
				})
				
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			})
		}
</script>

<style lang="scss" scoped>
.gb {
	width: 36rpx;
	height: 36rpx;
	margin-right: 12rpx;
}

.title {
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #666666;
}

.order{
	padding: 24rpx 25rpx 21rpx;
	&-sn {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}
	&-item {
		padding: 30rpx 36rpx;
		border-bottom: 1rpx solid #EEEEEE;
		
		&-icon {
			width: 42rpx;
			height: 33rpx;
		}
		&-icon1 {
			width: 39rpx;
			height: 33rpx;
		}
		&-icon2 {
			width: 32rpx;
			height: 33rpx;
		}
		
		&-span {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			// width: 106rpx;
			// height: 36rpx;
			padding: 6rpx 17rpx;
			background: #F5F5F5;
			border-radius: 3rpx;
			line-height: 36rpx;
			text-align: center;
			margin-left: 20rpx;
		}
		
		&-span1 {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			width: 306rpx;
			height: 36rpx;
			background: #F5F5F5;
			border-radius: 3rpx;
			line-height: 36rpx;
			text-align: center;
			margin-left: 20rpx;
		}
		
		&-sun {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #198FFF;
			line-height: 48rpx;
			&>text {
				margin: 0 14rpx 0 11rpx;
			}
		}
		
		&-pricetxt {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			margin-left: 24rpx;
		}
			
		&-fang {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #198FFF;
			padding: 5rpx 20rpx;
			background: rgba(25,143,255,0.05);
			border-radius: 3rpx;
			margin-left: 10rpx;
		}
	}
}

.total {
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 26rpx;
	color: #666666;
	padding: 37rpx 38rpx;
	box-sizing: border-box;
	&-num {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #ED2445;
		
		
	}
	&-gd {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		
	}
	&-gdimg {
		width: 11rpx;
		height: 20rpx;
		margin-left: 8rpx;
	}
}

.hotel {
		border-radius: 20rpx;
		padding: 30rpx 20rpx;

		&-h {
			width: 6rpx;
			height: 32rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			margin-right: 7rpx;
		}

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
		}

		&-img {
			width: 177.6rpx;
			height: 177.6rpx;
			background-color: #eee;
			border-radius: 12rpx;
			margin-right: 20rpx;
		}

		&-box {
			height: 177.6rpx;

		}

		&-span {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #999999;

			// width: 100rpx;
			height: 32rpx;
			background: #EEEEEE;
			padding: 7rpx 14rpx;
			border-radius: 6rpx;
		}

		&-price {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #ED2445;

			&>text {
				font-size: 26rpx;
			}
		}
	}

	.order {
		border-radius: 20rpx;
		padding: 30rpx 20rpx;

		&-sn {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #7C7C7C;
			margin-right: 56rpx;
		}

		&-info {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #272727;
		}

		&-copy {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 22rpx;
			color: #333333;

			width: 70rpx;
			height: 36rpx;
			background: #F2F2F2;
			border-radius: 18rpx;

			margin-left: 12rpx;
			text-align: center;
			line-height: 36rpx;
		}

		&-tex {
			margin-bottom: 44rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}

		&-total {
			justify-content: flex-end;
		}

		&-Num {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #272727;
		}

		&-price {
			font-size:36rpx;
			color: #ED2445;
			&>text {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #F0250F;
			}
		}
	}
	
</style>
